<template>
  <el-container class="el-container-cl">
    <!--头部区域    -->
    <el-header class="el-header-cl">
      <!--      <el-row :gutter="20">
              <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
            </el-row>-->
      <el-row class="el-row-main" type="flex">
        <el-col :span="3" class="el-col-index" align="middle" justify="center" :offset="8">
          <img src="../assets/img/eye.png">
        </el-col>
        <el-col :span="8" class="el-col-two">
          <span style="font-size: 25px; text-align: center">Code PlateForm</span>
        </el-col>
        <el-col :span="2" :offset="1" class="el-col-three">
          <el-button
            class="el-button-cl"
            @click="toUpload"
            type="success">
            贡献代码
          </el-button>
        </el-col>
        <el-col :span="2" class="el-col-three">
          <el-button class="el-button-cl el-icon-switch-button" aria-label="nihao1" label="你好" type="info"
                     @click="loginOut()">
            退出
          </el-button>
        </el-col>
      </el-row>
      <!--      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
              <el-menu-item index="6" class="el-index-6">
                <img src="../assets/img/eye.png"><span style="font-size: 25px">代码平台</span>
              </el-menu-item>

              <el-menu-item index="5" class="el-button-el">
                <el-button class="el-button-cl el-icon-switch-button"  aria-label="nihao1" label="你好" type="info" @click="loginOut()">
                  退出
                </el-button>
              </el-menu-item>
            </el-menu>-->
    </el-header>
    <!--    主题部分-->
    <el-container>
      <!--      <el-aside width="200px">

              <el-row class="tac">
                <el-col>
                  <el-menu
                    default-active="2"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose">
                    <el-submenu index="1">
                      <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>导航一</span>
                      </template>
                      <el-menu-item-group>
                        <template slot="title">分组一</template>
                        <el-menu-item index="1-1">选项1</el-menu-item>
                        <el-menu-item index="1-2">选项2</el-menu-item>
                      </el-menu-item-group>
                      <el-menu-item-group title="分组2">
                        <el-menu-item index="1-3">选项3</el-menu-item>
                      </el-menu-item-group>
                      <el-submenu index="1-4">
                        <template slot="title">选项4</template>
                        <el-menu-item index="1-4-1">选项1</el-menu-item>
                      </el-submenu>
                    </el-submenu>
                    <el-menu-item index="2">
                      <i class="el-icon-menu"></i>
                      <span slot="title">导航二</span>
                    </el-menu-item>
                    <el-menu-item index="3" disabled>
                      <i class="el-icon-document"></i>
                      <span slot="title">导航三</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                      <i class="el-icon-setting"></i>
                      <span slot="title">导航四</span>
                    </el-menu-item>
                  </el-menu>
                </el-col>

              </el-row>
            </el-aside>-->
      <el-main class="serach-main">
        <!--       搜索框部分-->
        <div class="serach-item">
          功能名称:
          <el-input placeholder="请输入内容"
                    v-model="codeNames"
                    :fetch-suggestions="querySearchAsync"
                    @select="handleSelect"
                    class="serach-item-input">
          </el-input>
          <el-radio-button @click.native="getList">搜索</el-radio-button>
        </div>
        <!--        功能展示-->
        <div class="codeListStyle">
          <!--     功能代码框-->
          <div v-for="(codeList,o) in codeLists" style="text-align: center" class="codeMoulde">
            <!--          <span>功能名称</span>-->
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                {{ codeList.codeName }}
              </div>
              <el-button type="primary" round @click="viewCode(o,0) ">前端代码预览</el-button>

              <el-button type="primary" round @click="viewCode(o,1)"
                         class="button-two">后端代码预览
              </el-button>

              <!--            <el-button type="text">操作按钮</el-button>-->
            </el-card>
            <!--            <h1>正在开发中</h1>-->
          </div>
          <!--          代码预览-->
          <el-dialog
            title="代码预览"
            :visible.sync="centerDialogVisible"
            width="50%"
            center>
            <code style="white-space: pre-wrap;"> {{ selectedCode }}</code>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
              <!--                   <el-button type="primary" @click="">复 制</el-button>-->
              </span>
          </el-dialog>

          <!--          <el-dialog
                      title="后端代码"
                      :visible.sync="centerDialogVisible1"
                      width="30%"
                      center>
                      <span>{{ selectedCode }}</span>
                      <span slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="centerDialogVisible1 = false">确 定</el-button>
                        <el-button type="primary" @click="">复 制</el-button>
                        </span>
                    </el-dialog>-->
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import {getCodeByLimte, getCodeList} from "../api";

export default {
  name: "Main",
  created() {
    let data1 = {
      codeName: '',
      codeFront: '',
      codeBack: ''
    }
    getCodeList(data1).then( (res) => {
      if (res.data.code == 200) {
        this.codeLists = res.data.content
        this.restaurants=res.data.content
        // await tolist();
    /*    function tolist() {
          return new Promise(resolve => {
            setTimeout(() => {
              /!*              this.restaurants = this.codeLists;
              console.log(this.codeLists)*!/
              resolve('resolved');
            }, 2000);
          });
        }*/
      }
    });
  },
  data() {
    return {
      codeNames: '',
      activeIndex: '1',
      selectedCode: '',
      codeLists: [
        {
          codeName: '',
          codeFront: '',
          codeBack: ''
        }
      ],
      restaurants: [
        {
          codeName: '',
          codeFront: '',
          codeBack: ''
        }
      ],
      centerDialogVisible: false,
      centerDialogVisible1: false
    };
  },
  methods: {
    getList: function () {

      if (this.codeNames=== null|| this.codeNames === ''){
      return   this.codeLists=this.restaurants
        // location.reload();
      }
      // if (event) {
      //   alert(event.target.tagName)
      // }
      let newList = []
      this.codeLists.filter(res => {
        if (res.codeName.search(this.codeNames) !== -1) {
          newList.push(res)
        }
      })
      console.log(newList)
      return this.codeLists = newList
      /*
        let data1={
        codeName : this.codeNames
      }
    getCodeByLimte(data1).then(res => {

        console.log(res)
        if (res.data.code === 200) {
          this.codeLists = res.data.content
          // console.log(this.codeLists)
        } else {
          alert("未查询到符合条件的值")
        }

      })*/
    },
    toUpload() {
      this.$router.push('/codeSubmit')
    },
    loginOut() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    querySearchAsync(codeNames, cb) {
      console.log("111111111")
      this.restaurants = this.codeLists;
      var results = codeNames ? restaurants.filter(this.createStateFilter(codeNames)) : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 3000 * Math.random());
    },
    createStateFilter(codeNames) {
      console.log("22222222222222")
      return (state) => {
        return (state.codeName.toLowerCase().indexOf(codeNames.toLowerCase()) === 0);
      };
    },

    viewCode(o1, o2) {

      if (o2 === 0) {

        this.selectedCode = this.codeLists[o1].codeFront

      } else {

        this.selectedCode = this.codeLists[o1].codeBack
      }
      this.centerDialogVisible = true
    },
    handleSelect(item) {

      console.log(item);
    }
    /*,
    writeText1() {

      console.log("选中的内容类型为" + this.selectedCard)
      if (this.selectedCard === 0) {
        navigator.clipboard.writeText(this.codeLists.codeFront).then(
          () => {
            console.log("粘贴文本成功");
          },
          () => {
            console.log("clipboard write failed");
          }
        );
      } else {
        navigator.clipboard.writeText(this.codeLists.codeBack).then(
          () => {
            console.log("粘贴文本成功");
          },
          () => {
            console.log("clipboard write failed");
          }
        );
      }
    }*/
  },
  mounted() {

  },
  async getMenuList() {
    // const {data: res} = await this.$http.get('menus')
    // console.log(res)
  },
  watch: {}

}
</script>

<style lang="less" scoped>
.el-container-cl {
  height: 100%;
  width: 100%;

  .el-header-cl {
    height: 10%;
    width: 100%;

    .el-row-main {
      height: 100%;
      width: 100%;
      background-color: #820ea2;

      .el-col-index {
        top: 50%;
        transform: translateY(-50%);
        margin-top: 20px;
        opacity: 0.5;

        img {
          height: 60px;
          width: 100px;
        }
      }

      .el-col-two {
        top: 50%;
        transform: translateY(-50%);
        margin-top: 30px;
      }

      .el-col-three {
        top: 50%;
        transform: translateY(-50%);
        margin-top: 26px;
      }

    }
  }
}

.el-header {
  padding: 0;
}

.el-container {
  height: 90%;
  width: 100%;
}

.el-main {
  background-color: #52b4a8;
}

.serach-item {
  margin-left: 500px;
  width: 500px;

}

.serach-item-input {
  width: 300px;

}

.serach-main {
  width: 100%;
}

.codeListStyle {
  width: 100%;
  display: flex;
  flex-wrap: wrap;

  .codeMoulde {
    width: 300px;

    .box-card {
      width: 250px;
      padding: 10px;
      margin: 10px;
      border: 1px solid #fff;
      border-radius: 50%;
      background-image: url("../assets/img/img_3.png");

      .clearfix:before,
      .clearfix:after {
        display: table;
        content: "";
      }

      .clearfix:after {
        clear: both
      }
    }
  }
}

//卡片部分
.button-two {
  margin: 10px;
}


</style>
